<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
        #app{
            width: 600px;
            height: 400px;
            margin:0 auto;
            border: 1px solid black;
        }
        .my-header{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:10px;
            height: 60px;
        }
        .my-header-left{
            color:#9694c1;
            font-size:20px;
        }
        .my-header-right{
            color:#f0a186;
            font-size:18px;
        }
        .my-body{
            padding: 10px;
            width: 100%;
        }
        .my-body textarea{
            width: 100%;
            height: 200px;
        }
        .my-footer{
            display: flex;
            padding:10px;
            justify-content: space-between;
        }
        .my-footer-left{
            display: flex;
            align-items: center;
        }
        .footer-left-item{
            width: 70px;
            text-align: center;
        }
        .my-footer-right{
            width: 100px;
            height: 50px;
            background-color: #f5c1a0;
            color:white;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <my-header></my-header>
        <my-body></my-body>
        <div class="my-footer">
            <div class="my-footer-left">
                <div class="footer-left-item">表情</div>
                <div class="footer-left-item">图片</div>
                <div class="footer-left-item">视频</div>
                <div class="footer-left-item">话题</div>
                <div class="footer-left-item">头条文章</div>
            </div>
            <div class="my-footer-right">
                发帖
            </div>
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        /* 全局的组件实现的 */
        Vue.component("my-header",{
            template:`
                <div class="my-header">
                    <div class="my-header-left">有什么新鲜事想告诉大家</div>
                    <div class="my-header-right">热门微博</div>
                </div>
            `
        })
        let vm = new Vue({
            el:"#app",
            data:{
            },
            // 局部组件
            components:{
                "my-body":{
                    template:`
                        <div class="my-body">
                                <textarea></textarea>
                        </div>
                    `
                }
            }
        })
    </script>
</body>
</html>